<template>
  <div class='articleWrapper'>
    <div class='header'>
      <span @click="backToDocterMainPage" class='backIcon'>{{point}}</span>
      <span>名医说</span>
    </div>
    <div class="content">
      <div class="titleWrapper">
        <span class='title'>发现脑动脉血管硬化狭窄怎么办?</span>
        <span class='commit'><span class='commitTitle'>赞</span><img src="../../../../public/image/like.png" alt=""></span>
      </div>
      <div class='authorWrapper'>
        <div class="avatar">
          <img src="../../../../public/image/user3.png" alt="" class='avatarPic'>
        </div>
        <div class="detail">
          <div class='firstLine'><span class='authorName'>刘妙春</span><span class='time'>2019年6月3日</span></div>
          <div class='secondLine authorTitle'>主任医师 北大医院神经外科</div>
        </div>
      </div>
      <div class='articleContent'>
        312321321321321312
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      point: '<'
    }
  },
  methods: {
    backToDocterMainPage () {
      wx.navigateBack({
        delta: 1
      })
    },
  }
}
</script>

<style scoped>
.informationWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}
.header{
  height: 150rpx;
  line-height: 150rpx;
  width: 100%;
  background-color: #f3f1f4;
  padding-left: 40rpx;
  font-size: 36rpx;
  color: #000000;
}
.header .backIcon {
  display: inline-block;
  margin-right: 20rpx;
}
.content {
  position: absolute;
  box-sizing: border-box;
  padding: 0 20rpx;
  top: 150rpx;
  bottom: 0;
  width: 100%;
  color: #282828;
}
.titleWrapper{
  height: 100rpx;
  line-height: 100rpx;
  width: 100%;
  box-sizing: border-box;
}
.title{
  font-size: 32rpx;
  color: #000000;
}
.authorWrapper {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
}
.commit {
  float: right;
  line-height: 100rpx;
  position: relative;
  color: #3c61ee;
}
/*  */
.commit img {
  width: 40rpx;
  height: 40rpx;
  float: right;
  margin-top: 30rpx;
  margin-left: 10rpx;
  /* position: absolute;
  top: 20rpx; */
}
.avatar {
  float: left;
  box-sizing: border-box;
  padding: 10rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.avatarPic {
  width: 80rpx;
  height: 80rpx;
}
.detail {
  float: left;
  margin-left: 20rpx;
    height: 100rpx;
  line-height: 100rpx;
}
.firstLine, .secondLine {
  height: 50rpx;
  line-height: 50rpx;
}
.authorName {
  font-size: 26rpx;
  color: #3c61ee;
  margin-right: 10rpx;
}
.time, .authorTitle {
  color: #6c6c6c;
  font-size: 24rpx;
}
.articleContent {
  font-size: 26rpx;
  color: #000000;
}
</style>